import PageCommon from "@/components/PageCommon";
import { useTextColor } from "@/hooks";
import type { FC } from "react";
import { memo } from "react";
import styles from "./index.less";

interface iProps {
  children?: any;
}

const DetailCOntainer: FC<iProps> = ({ children }) => {
  const [containerBgColor] = useTextColor(1, { darkSpace: 20, lightSpace: 255 });

  return (
    <PageCommon>
      <div
        className={styles.container}
        style={{
          backgroundColor: containerBgColor
        }}
      >
        {children}
      </div>
    </PageCommon>
  );
};

interface iTitleProps {
  children?: any;
}

export const Title: FC<iTitleProps> = ({ children }) => {
  const [titleColor] = useTextColor(0.8);
  const [titleBgColor] = useTextColor(1, { darkSpace: 40, lightSpace: 230 });

  return (
    <div
      className={styles.title}
      style={{
        color: titleColor,
        backgroundColor: titleBgColor
      }}
    >
      {children}
    </div>
  );
};

export default memo(DetailCOntainer);
